<template>
  <div class="dashboard-container">
    <div class="dashboard-header">
      <h1>数据仪表盘</h1>
      <div v-if="loading" class="loading-indicator">
        <el-icon><Loading /></el-icon>
        <span>数据加载中...</span>
      </div>
      <el-alert 
        v-if="error"
        :title="error"
        type="error"
        show-icon
        class="error-alert"
      />
    </div>
    
    <div class="stat-cards">
      <StatCard 
        v-for="stat in stats" 
        :key="stat.title"
        :title="stat.title"
        :value="stat.value"
        :icon="stat.icon"
        :trend="stat.trend"
      />
    </div>

    <div class="charts-row">
      <LineChart :data="chartData.line" />
      <BarChart :data="chartData.bar" />
    </div>

    <div class="data-table">
      <DataTable 
        :items="tableData" 
        title="报告数据" 
        :loading="loading"
        :columns="tableColumns"
        @refresh="fetchData"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { Loading } from '@element-plus/icons-vue'
import StatCard from '@/components/common/StatCard.vue'
import LineChart from '@/components/charts/LineChart.vue'
import BarChart from '@/components/charts/BarChart.vue'
import DataTable from '@/components/common/DataTable.vue'
import { fetchDashboardData } from '@/api/dashboard'

const stats = ref([
  { title: '总报告数', value: 0, icon: 'file', trend: 0 },
  { title: '今日新增', value: 0, icon: 'plus', trend: 0 },
  { title: '完成率', value: 0, icon: 'check', trend: 0 },
  { title: '平均得分', value: 0, icon: 'star', trend: 0 }
])

const chartData = ref({
  line: { labels: [], datasets: [] },
  bar: { labels: [], datasets: [] }
})

const tableData = ref([])

const tableColumns = ref([
  { prop: 'id', label: '编号', width: '80px' },
  { prop: 'title', label: '标题' },
  { prop: 'author', label: '作者' },
  { prop: 'date', label: '日期' },
  { prop: 'status', label: '状态' }
])

const loading = ref(true)
const error = ref(null)
let refreshTimer: number | null = null

const fetchData = async () => {
  try {
    loading.value = true
    const data = await fetchDashboardData()
    
    if (data) {
      stats.value = data.stats || []
      chartData.value = data.charts || { line: { labels: [], datasets: [] }, bar: { labels: [], datasets: [] } }
      tableData.value = data.table || []
      error.value = null
    }
  } catch (err) {
    console.error('获取仪表盘数据失败', err)
    // 不显示错误提示，因为模拟数据已经在API层处理
    error.value = null
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  fetchData()
  // 每90秒刷新一次数据
  refreshTimer = setInterval(fetchData, 90000)
})

onBeforeUnmount(() => {
  if (refreshTimer) {
    clearInterval(refreshTimer)
  }
})
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
  min-height: calc(100vh - 60px);
  background-color: #ffffff;
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
}

.dashboard-header h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  color: #303133;
}

.loading-indicator {
  display: flex;
  align-items: center;
  color: var(--el-color-primary);
  gap: 8px;
  font-size: 14px;
}

.error-alert {
  margin-bottom: 20px;
  border-radius: 4px;
}

.stat-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  margin-bottom: 25px;
}

.charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-bottom: 25px;
}

:deep(.el-card) {
  border-radius: 4px;
  border: 1px solid #ebeef5;
  box-shadow: none;
  transition: all 0.3s ease;
}

:deep(.el-card:hover) {
  border-color: #c0c4cc;
}

:deep(.el-card__header) {
  padding: 12px 15px;
  border-bottom: 1px solid #ebeef5;
  font-weight: 500;
}

:deep(.el-card__body) {
  padding: 15px;
}

:deep(.el-table) {
  border: none;
}

:deep(.el-table th) {
  background-color: #f5f7fa;
  border-bottom: 1px solid #ebeef5;
  font-weight: 500;
}

:deep(.el-table td) {
  border-bottom: 1px solid #ebeef5;
}

:deep(.el-table--border) {
  border: 1px solid #ebeef5;
}

/* 响应式布局 */
@media (max-width: 1200px) {
  .stat-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .charts-row {
    grid-template-columns: 1fr;
  }
  
  .stat-cards {
    grid-template-columns: 1fr;
  }
  
  .dashboard-container {
    padding: 10px;
  }
}
</style>
